<template>
  <div class="home">
    <el-card shadow="never">
      <template #header> <span>首页</span> </template>
      <el-row>
        <el-col :xs="22" :sm="18" :md="15" :lg="12">
          <div class="home_user">
            <el-avatar style="width: 100px;height: 100px;" size="large" :src="avatars" />
            <div class="user_title">
              <p class="title">{{ time }}【{{ userStore.UserInfos.name }}】开始您一天的工作吧！</p>
              <p class="text">今日阴转大雨，17℃ - 28℃，出门记得带伞哦。</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="1" :sm="2" :md="3" :lg="4" v-for="item in svgIcons" class="hidden-xs-only">
          <div class="fixed">
            <SvgIcon :name="item.name" :size="item.size" style="margin-bottom: 15px;"></SvgIcon>
            <Count :value=item.value></Count>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row class="row"  style="margin-top: 15px;" :gutter="5">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="card">
          <div class="card_title">快捷跳转</div>
          <div class="grid">
            <div class="grid_item" v-for="item in ToData" :key="item.title" @click="item.click">
              <div class="iconTitle">
                <SvgIcon :name="item.icon" size="30" style="margin-right: 15px;"></SvgIcon>
                <span>{{ item.title }}</span>
              </div>
              <div class="desc">{{ item.desc }}</div>
              <div class="authe">{{ item.author }}</div>
            </div>
          </div>
        </div>
        <!-- </el-card> -->
      </el-col>

      <el-col :md="12" :lg="12" :xl="12" class="hidden-sm-and-down" >
        <div class="chart" style="height: 100%;">
          <EchartsHome></EchartsHome>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts" name="Home">
import { getTimeState } from '@/utils/utils'
import { useUserStore } from '@/stores';
import { computed } from 'vue';
import EchartsHome from './EchartsHome.vue';
import Count from '@/components/common/Count.vue';
import 'element-plus/theme-chalk/display.css'
const userStore = useUserStore()
const time = computed(() => getTimeState())
const avatars = computed(() => userStore.UserInfos ? userStore.UserInfos?.avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')




const svgIcons = [
  {
    name: 'dog',
    size: 50,
    value: 1893
  },
  {
    name: 'pig',
    size: 50,
    value: 2393
  },
  {
    name: 'cat',
    size: 50,
    value: 1493
  },
]

interface ToDataType {
  icon: string,
  title: string,
  desc: string,
  author: string,
  link?: string,
  click?: () => {}
}
/* 快捷网址 */
const ToData: ToDataType[] = [
  {
    icon: "bilibili",
    title: "BiliBili",
    desc: "bilibili是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐.",
    author: "HHB 2025-01-01",
    link: "https://www.bilibili.com/",
    click: () => window.location.href = 'https://www.bilibili.com/'
  },
  {
    icon: "gitee",
    title: "Gitee",
    desc: "Gitee 是国内领先的企业级研发效能和开源代码托管平台，支持多种语言和技术框架，提供项目协同、代码管理、代码扫描、持续集成等功能.",
    author: "学不动也要学 2025-01-01",
    link: "https://gitee.com/",
    click: () => window.location.href = 'https://gitee.com/'
  },
  {
    icon: "GitHub",
    title: "GitHub",
    desc: "GitHub是一个面向开源及私有软件项目的托管平台.",
    author: "撸码也是一种艺术 2025-01-01",
    link: "https://github.com/",
    click: () => window.location.href = 'https://github.com/'
  },
  {
    icon: "element",
    title: "Element Plus",
    desc: "Element Plus 基于 Vue 3，面向设计师和开发者的组件库.",
    author: "组件码农 2021-04-01",
    link: "https://element-plus.org/zh-CN/",
    click: () => window.location.href = 'https://element-plus.org/zh-CN/'
  },
  {
    icon: "Echarts",
    title: "Apache ECharts",
    desc: "Apache ECharts 一个基于 JavaScript 的开源可视化图表库.",
    author: "图表哥 2025-01-01",
    link: "https://echarts.apache.org/zh/index.html",
    click: () => window.location.href = 'https://echarts.apache.org/zh/index.html'

  },
  {
    icon: "Uniapp",
    title: "UniApp",
    desc: "uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台.",
    author: "分享君 2025-01-01",
    link: "https://uniapp.dcloud.net.cn/",
    click: () => window.location.href = 'https://uniapp.dcloud.net.cn/'
  }
];

const pieData = [
  { value: 4524, name: "Gitee 访问量" },
  { value: 8616, name: "GitHub 访问量" }
];
</script>

<style lang="scss" scoped>
.home {
  .home_user {
    display: flex;
    align-items: center;
    width: 100%;

    // justify-content: center;
    .user_title {
      margin-left: 20px;

      .title {
        font-size: 20px;
        padding: 10px 0;
      }

      .text {
        font-size: 15px;
        padding: 5px 0;
      }
    }
  }

  .fixed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
  }
.row{
  .card {
    // background-color: $base-home-cardbg;
    background-color: var(--bg2-color);
    color: var(--text-color);
    border: 1px solid var(--boder-color);
    .card_title {
      height: 30px;
      display: flex;
      align-items: center;
      padding-left: 15px;
      font-weight: 500;
      font-family: "宋体";
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;

      .grid_item {
        padding: 15px;
        height: 210px;
        cursor: pointer;

        .iconTitle {
          display: flex;
          align-items: center;
          padding: 0 0 10px 0;
        }

        .desc {
          margin: 10px 0;
          font-size: 15px;
          max-width: 220px;
          overflow: hidden;
          @include showLine(3);
        }

        .authe {
          margin: 10px 0;
          font-size: 13px;
          color: rgba(66, 65, 65, 0.515);
          @include showLine(1);
        }

        &:hover {
          box-shadow:rgba(117, 117, 117, 0.193) 1px 1px 10px;
          /*盒子阴影*/
          transition: all 0.5s;
          /*持续时间*/
        }
      }
    }
  }
}
  .chart{
    padding: 10px;
    border: 1px solid var(--boder-color);
    background-color:var(--bg2-color);
    color: var(--text-color);
    }
}
</style>
